<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--
        2.组件配置项可以有哪些
        组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，
        例如 data、computed、watch、methods 以及生命周期钩子等。
          2.1仅有的例外是像 el 这样根实例特有的选项
         2.2一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝

-->
<div id="app">
    <customer-component></customer-component>
    <customer-component></customer-component>
</div>

<script>

    /*
        全局组件是直接将组件注册在Vue上
    *   局部组件
          1. 定义组件
          2. 注册局部组件
          3. 使用局部组件

       注意:
          子组件中的配置项:
            1.  不应该包含 el配置项  只有根组件需要绑定容器
            2.  data配置项 在子组件中应该使用函数定义 不应该在使用对象形式  如果使用对象形式 则后续通过组件标签创建的多个组件之间在操作
                data中数据时会互相影响  因为多个组件之间是共享了一个data对象 ，如果data以函数的形式进行配置，则每使用一次组件标签所创建的
                组件示例都会维护一个独立的data属性值
    * */

    let CustomerComponent = {
        template: '<button @click="add">You clicked me  {{counts}}  times.</button>',
        data() {
            return {
                counts: 0
            }
        },
        methods: {
            add() {
                this.counts++
            }
        }
    }

    // 全局组件
    // Vue.component('CustomerComponent',CustomerComponent)


    // 组件  根组件
    let vm = new Vue({
        el: '#app',
        data: {},
        /*组件注册   局部组件  子组件   属性名(组件名): 组件      */
        components: {
            // 'CustomerComponent': CustomerComponent
            // CustomerComponent
            'customer-component': CustomerComponent
        }
    })

</script>
</body>
</html>